<template>
	<view>
		<view class="" v-if='action'>
			<u-tabs :list="list4" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
	            color: '#303133',
	            fontWeight: 'bold',
	            transform: 'scale(1.05)'
	        }" :inactiveStyle="{
	            color: '#606266',
	            transform: 'scale(1)'
	        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="tabs">
			</u-tabs>
			<view class="">
				<u-cell-group>
					<view v-for="(item,index) in account_all" :key="index" @click="question(item.titile)">
						<u-cell class="set1" :title="item.titile" isLink></u-cell>
					</view>
				</u-cell-group>
			</view>
		</view>

		<view class="" v-else>
			<help :name='name'></help>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list4: [{
					name: '热门问题'
				}, {
					name: '账号',
					badge: {
						isDot: true
					}
				}, {
					name: '其他',
				}, {
					name: '消息'
				}, {
					name: '评价'
				}, {
					name: '交易'
				}],
				account: [{
						titile: "Q: 优购账号名可以修改吗?" //账号
					},
					{ //其他
						titile: "Q: 深色模式如何开启等？"
					},
					{
						titile: "Q: 我的头像、昵称、怎么跟新不了等？"
					},
					{
						titile: "Q: 升级版本后，怎么找不到优购等？"
					},
					{ //消息
						titile: "Q: 为什么我找不到消息入口？"
					},
					{
						titile: "Q: 消息得批量功能在哪里？"
					},
					{ //评价
						titile: "Q: 评价后被商家骚扰如歌反馈？"
					},
					{
						titile: "Q: 评价-消息的批量功能在哪里？"
					}, {
						titile: "Q: 评价如何删除？"
					}, {
						titile: "Q: 为什么评价传图失败？"
					}, { //交易
						titile: "Q: 交易-购物车内销售商品无法删除？"
					},
				],
				account_all: [],
				name: '',
				action: true,
			};
		},
		onLoad() {
			uni.$setNavigationBarColor()
			this.account_all = this.account
		},
		methods: {
			//问题
			question(titile) {
				this.name = titile
				this.action = false
			},
			tabs(item) {
				this.account_all = this.account
				if (item.name == "热门问题") {
					return this.account_all = this.account
				}
				if (item.name == "其他") {
					return this.account_all = this.account_all.filter(accountItem => Boolean(accountItem.titile.includes('等')))
				}

				this.account_all = this.account_all.filter(accountItem => Boolean(accountItem.titile.includes(item.name)))
			}
		}
	}
</script>

<style lang="scss">
	.set1 {
		padding-top: 20px;
	}
</style>